﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="Author" content="阴阳师">
        <title>阴阳师</title>
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/index.css">
        <script src="js/jquery.min.js"></script>
    </head>
    <body>

        <div id="main">
            <!--header start-->
            <div id="header">
                <!--导航-->
                <div id="nav">
                    <!--主导航-->
                    <ul class="mainList">
                        <li class="mNav"><a href="demo.html">官网首页</a></li>
                        <li class="line"></li>
                        <li class="mNav"><a href="javascript:void(0)">新闻资讯</a></li>
                        <li class="line"></li>
                        <li class="mNav"><a href="javascript:void(0)">游戏攻略</a></li>
                        <li class="line"></li>
                        <li class="mNav"><a href="javascript:void(0)">游戏特色</a></li>
                        <li class="line"></li>
                        <li class="mNav haveHide">
                            <a href="javascript:void(0)">同人专区</a>
                            <span class="arrow"></span>
                        </li>
                        <li class="line"></li>
                        <li class="mNav haveHide">
                            <a href="javascript:void(0)">官方渠道</a>
                            <span class="arrow"></span>
                        </li>
                    </ul>
                    <!--导航下拉隐藏层-->
                    <div class="ulHide">
                        <div class="hide">
                            <ul class="hideList">
                                <li class="mHideLi">
                                    <a href="javascript:void(0)">
                                        <i class="i1"></i>
                                        <p>玩家COS</p>
                                    </a>
                                </li>
                                <li class="border"></li>
                                <li class="mHideLi">
                                    <a href="javascript:void(0)">
                                        <i class="i2"></i>
                                        <p>同人绘画</p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="hide">
                            <ul class="hideList">
                                <li class="mHideLi">
                                    <a href="javascript:void(0)">
                                        <i class="i1"></i>
                                        <p>玩家COS</p>
                                    </a>
                                </li>
                                <li class="border"></li>
                                <li class="mHideLi">
                                    <a href="javascript:void(0)">
                                        <i class="i2"></i>
                                        <p>同人绘画</p>
                                    </a>
                                </li>
                                <li class="border"></li>
                                <li class="mHideLi">
                                    <a href="javascript:void(0)">
                                        <i class="i2"></i>
                                        <p>同人绘画</p>
                                    </a>
                                </li>

                                <li class="border"></li>
                                <li class="mHideLi">
                                    <a href="javascript:void(0)">
                                        <i class="i2"></i>
                                        <p>同人绘画</p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!--logo1、二维码-->
                    <div class="logo">
                        <div class="qrcode">
                            <p>扫描下载</p>
                            <img src="picture/qrcode.png" alt="">
                        </div>
                        <div class="mLogo">
                            <p class="img"></p>
                            <p class="p1">阴阳师</p>
                            <p class="p2">网易和风匠心巨制</p>
                        </div>
                    </div>
                </div>

                <!--logo2-->
                <div id="logo2"></div>

                <!--role-->
                <div id="role" onselectstart="return false">
                    <div class="rol1">
                        <p class="role role1 hide"></p>
                        <p class="role role2 hide"></p>
                    </div>
                    <div class="rol2">
                        <p class="role role3 hide"></p>
                        <p class="role role4 hide"></p>
                    </div>
                    <p class="btn"></p>
                    <img class="bottomImg" src="picture/role_botbg.png" alt="">
                    <!--server-->
                    <div id="server">
                        <img src="picture/bunny.gif" alt="">
                    </div>
                </div>

                <!--服务器列表-->
                <div id="serverList">
                    <div class="main">

                        <span class="close"></span>
                        <div class="botImg"></div>
                    </div>
                </div>

            </div>
            <!--end header-->

            <!--slide start-->
            <div id="slide">

                <p class="title"></p>
                <span class="arrow"></span>

                <!--下载横向伸缩区-->
                <div class="download stretch">
                    <p class="shrink"></p>
                    <div class="downloadMain">
                        <span class="close"></span>
                        <p class="bg1"></p>
                        <div class="qrcode">
                            <img class="qr" src="picture/qrcode.png" width="210" height="210" alt="">
                            <img class="line" src="picture/line.png" width="106" height="9" alt="">
                        </div>
                        <div class="downLink">
                            <a href="javascript:void(0)" class="ios"></a>
                            <a href="javascript:void(0)" class="android"></a>
                        </div>
                    </div>
                </div>

                <!--游戏日历主内容-->
                <div class="main">
                    <ul>
                        <li class="mainLi l9 left"></li>
                        <li class="mainLi l8 right"></li>
                        <li class="mainLi l7 left"></li>
                        <li class="mainLi l6 right"></li>
                        <li class="mainLi l5 left"></li>
                        <li class="mainLi l4 right"></li>
                        <li class="mainLi l3 left"></li>
                        <li class="mainLi l2 right"></li>
                        <li class="mainLi l1 left">
                            <div class="show">协同斗技,每周六日14:00-15:30斗技</div>
                            <div class="hide">
                                <p class="hide">周一至周五  11:00-13:00,20:00-22:00</p>
                                <p class="hide">周一至周五  11:00-13:00,20:00-22:00</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!--slide end-->

            <!--content start-->
            <div id="content">
                <!--新闻 和 banner部分-->
                <div id="news">

                    <!--banner-->
                    <div class="banner">
                        <div class="pic">
                            <ul>
                                <li><a href="javascript:void(0)"><img src="picture/1.jpg" alt=""></a></li>
                                <li><a href="javascript:void(0)"><img src="picture/2.jpg" alt=""></a></li>
                                <li><a href="javascript:void(0)"><img src="picture/3.jpg" alt=""></a></li>
                                <li><a href="javascript:void(0)"><img src="picture/4.jpg" alt=""></a></li>
                                <li><a href="javascript:void(0)"><img src="picture/5.jpg" alt=""></a></li>
                            </ul>
                        </div>
                        <div class="tab">
                            <ul>
                                <li class="on"></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>
                    </div>

                    <!--新闻-->
                    <div class="inform">
                        <div class="tab">
                            <ul>
                                <li class="l1 on"><a href="javascript:void(0)"><i></i><span></span></a></li>
                                <li class="l2"><a href="javascript:void(0)"><i></i><span></span><b></b></a></li>
                                <li class="l3"><a href="javascript:void(0)"><i></i><span></span><b></b></a></li>
                                <li class="l4"><a href="javascript:void(0)"><i></i><span></span><b></b></a></li>
                                <li class="l5"><a href="javascript:void(0)"><i></i><span></span><b></b></a></li>
                            </ul>
                        </div>

                        <div class="show">
                            <ul class="wrapUl">
                                <li class="new wrapLi"></li>
                                <li class="news wrapLi"></li>
                                <li class="active wrapLi"></li>
                                <li class="notice wrapLi"></li>
                                <li class="media wrapLi"></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!--content end-->

            <!--character start-->
            <div id="character">
                <div class="sMain">
                    <!--平安之旅 式神 主角-->
                    <div class="title">
                        <span class="bg1"></span>
                        <span class="dotted"></span>
                        <p class="tab active">
                            <i></i>
                            <span class="tab1"></span>
                        </p>
                        <span class="dotted"></span>
                        <p class="tab">
                            <i></i>
                            <span class="tab2"></span>
                        </p>
                    </div>

                    <!--对应的显示-->
                    <div class="showMain">
                        <ul class="mList">
                            <!--式神列表-->
                            <li class="mLi shishenList">
                                <div class="shishenTab">
                                    <ul>
                                        <li class="clickBtn on">全部</li>
                                        <li class="clickBtn">SSR</li>
                                        <li class="clickBtn">SR</li>
                                        <li class="clickBtn">R</li>
                                        <li class="clickBtn">N</li>
                                        <li class="allBtn"><a href="javascript:void(0)"><img src="picture/viewall_btn.png" alt=""></a></li>
                                    </ul>
                                </div>
                                <div class="mainList">
                                    <div class="mUl show">
                                        <ul class="ALL">
                                            <!-- <li class="ssList">
                                                 <div class="shishen">
                                                     <img src="picture/201.png" alt="">
                                                     <p class="cover"><span>雪女</span></p>
                                                     <i class="new"></i>
                                                 </div>
                                                 <div class="shishen">
                                                     <img src="picture/201.png" alt="">
                                                     <p class="cover"><span>雪女</span></p>
                                                     <i class="new"></i>
                                                 </div>
                                             </li>-->
                                        </ul>

                                        <p class="btn left"></p>
                                        <p class="btn right"></p>
                                    </div>
                                    <div class="mUl">
                                        <ul class="SSR"></ul>
                                        <p class="btn left"></p>
                                        <p class="btn right"></p>
                                    </div>
                                    <div class="mUl">
                                        <ul class="SR"></ul>
                                        <p class="btn left"></p>
                                        <p class="btn right"></p>
                                    </div>
                                    <div class="mUl">
                                        <ul class="R"></ul>
                                        <p class="btn left"></p>
                                        <p class="btn right"></p>
                                    </div>
                                    <div class="mUl">
                                        <ul class="N"></ul>
                                        <p class="btn left"></p>
                                        <p class="btn right"></p>
                                    </div>
                                </div>
                            </li>

                            <!--主角列表-->
                            <li class="mLi zhujueList" style="display: none">
                                <div class="tab">
                                    <ul>
                                        <li class="active">晴明<i></i></li>
                                        <li>神乐<i></i></li>
                                        <li>源博雅<i></i></li>
                                        <li>八百比丘尼<i></i></li>
                                    </ul>
                                </div>
                                <div class="pic">
                                    <ul>
                                        <li class="qm" style="display: block">
                                            <div class="img"><img src="picture/zhujue_qingming.png" alt=""></div>
                                            <div class="dec">
                                                <p class="index"></p>
                                                <p class="name">晴明</p>
                                                <p class="info">
                                                    京都城中极具盛名的天才阴阳师 <br>
                                                    却不知为何失去了自己的记忆 <br>
                                                    等待着他的是寻回记忆的喜悦 <br>
                                                    还是不堪回首的残忍真相
                                                </p>
                                            </div>
                                        </li>
                                        <li class="sl">
                                            <div class="img"><img src="picture/zhujue_shenle.png" alt=""></div>
                                            <div class="dec">
                                                <p class="index"></p>
                                                <p class="name">神乐</p>
                                                <p class="info">善良而沉默的神秘少女 <br>
                                                    失忆后便跟随在晴明身边<br>
                                                    拥有敏锐的直觉和强大的通灵能力<br>
                                                    以及不为人知的过去</p>
                                            </div>
                                        </li>
                                        <li class="yby">
                                            <div class="img"><img src="picture/zhujue_yby.png" alt=""></div>
                                            <div class="dec">
                                                <p class="index"></p>
                                                <p class="name">源博雅</p>
                                                <p class="info">拥有皇室血统的贵族青年 <br>
                                                    擅长弓术与结界之术 <br>
                                                    性情孤傲爽直 <br>
                                                    但似乎一直在寻找某个重要的人
                                                </p>
                                            </div>
                                        </li>
                                        <li class="bqn">
                                            <div class="img"><img src="picture/zhujue_bqn.png" alt=""></div>
                                            <div class="dec">
                                                <p class="index"></p>
                                                <p class="name">八宝比丘尼</p>
                                                <p class="info">因误食人鱼肉而不老不死 <br>
                                                    能力超凡的流浪占卜师<br>
                                                    一直在凤凰林中等待着<br>
                                                    占卜之梦预言的命运之人</p>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!--character end-->

            <!--strategy start-->
            <div id="strategy">
                <div class="leftPart">
                    <!--搜索框-->
                    <div class="search">
                        <div class="sInp"><input type="text" placeholder="请输入寮间问题"></div>
                        <div class="sBtn"></div>
                    </div>
                    <div class="bMain">
                        <!--banner-->
                        <div class="banner">
                            <div class="pic">
                                <ul>
                                    <li><a href="javascript:void(0)"></a><img src="picture/banner1.jpg" alt=""></li>
                                    <li><a href="javascript:void(0)"></a><img src="picture/banner2.jpg" alt=""></li>
                                </ul>
                            </div>
                            <div class="tab">
                                <ul>
                                    <li class="on"></li>
                                    <li></li>
                                </ul>
                            </div>
                        </div>
                        <!--navLink-->
                        <div class="navLink">
                            <ul>
                                <li class="l1"><a href="javascript:void(0)"><span></span><i></i></a></li>
                                <li class="l2"><a href="javascript:void(0)"><span></span><i></i></a></li>
                                <li class="l3"><a href="javascript:void(0)"><span></span><i></i></a></li>
                                <li class="l4"><a href="javascript:void(0)"><span></span></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="rightPart">
                    <div class="title">
                        <span class="tab bg1"></span>
                        <span class="dotted"></span>
                        <p class="tab">
                            <i></i>
                            <span class="tab1"></span>
                        </p>
                        <span class="dotted"></span>
                        <p class="tab">
                            <i></i>
                            <span class="tab2"></span>
                        </p>
                        <span class="dotted"></span>
                        <p class="tab">
                            <i></i>
                            <span class="tab3"></span>
                        </p>
                        <span class="dotted"></span>
                        <p class="tab">
                            <i></i>
                            <span class="tab4"></span>
                        </p>
                    </div>
                    <div class="mContent">
                        <div class="show">
                            <ul>
                                <!--<li>
                                    <a href="javascript:void(0)">
                                        <i></i>
                                        <p class="mTitle">【<span class="type">御魂</span>】&nbsp;逆转的胜利！反击流式神阵容推荐！</p>
                                        <p class="author">作者：<span>迷子</span></p>
                                    </a>
                                </li>-->
                            </ul>
                            <ul></ul>
                            <ul></ul>
                            <ul></ul>
                            <ul></ul>
                        </div>
                    </div>
                </div>
            </div>
            <!--strategy end-->

            <!--fan start-->
            <div id="fan">
                <div class="tab">
                    <div class="img"></div>
                    <div class="tabNav">
                        <p class="line"></p>
                        <ul>
                            <li class="l1 on"><span>精选推荐</span><i></i></li>
                            <li class="l2"><span>同人绘画</span><i></i></li>
                            <li class="l3"><span>玩家COS</span><i></i></li>
                            <li class="l4"><span>同人视频</span><i></i></li>
                            <li class="l5"><span>同人小说</span><i></i></li>
                            <li class="l6"><span>高手在民间</span><i></i></li>
                        </ul>
                    </div>
                    <a href="javascript:void(0)" class="goLink"></a>
                </div>
                <div class="mFan">
                    <div class="show">
                        <!--<li>
                            <div class="pic">
                                <img src="picture/1.jpg" alt="">
                                <span><b></b></span>
                            </div>
                            <p class="sTitle">妖刀姬cos【作者】@押切YAKI</p>
                        </li>-->
                    </div>
                </div>
            </div>
            <!--fan end-->

            <!--video start-->
            <div id="video">
                <div class="vMain">
                    <div class="leftVideo box">
                        <ul>
                            <li class="first">
                                <i></i>
                            </li>
                            <li>
                                <div class="pic">
                                    <img src="picture/1.jpg" alt="">
                                </div>
                                <p class="dec">《阴阳师》核心玩法</p>
                            </li>
                            <li>
                                <div class="pic">
                                    <img src="picture/2.jpg" alt="">
                                </div>
                                <p class="dec">《阴阳师》声优阵容</p>
                            </li>
                            <li>
                                <div class="pic">
                                    <img src="picture/3.jpg" alt="">
                                </div>
                                <p class="dec">【阴阳师X极乐净土】抽式神不如跳舞</p>
                            </li>
                        </ul>
                    </div>
                    <div class="rightWallpaper box">
                        <ul>
                            <li class="first">
                                <i></i>
                            </li>
                            <li>
                                <div class="pic">
                                    <img src="picture/4.jpg" alt="">
                                </div>
                                <p class="dec">游戏场景原画</p>
                            </li>
                            <li>
                                <div class="pic">
                                    <img src="picture/5.jpg" alt="">
                                </div>
                                <p class="dec">游戏场景原画</p>
                            </li>
                            <li>
                                <div class="pic">
                                    <img src="picture/6.jpg" alt="">
                                </div>
                                <p class="dec">游戏角色原画</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!--video end-->

            <!--activity start-->
            <div id="activity">
                <div class="left">
                    <img src="picture/activity_title.png" alt="">
                </div>
                <div class="right">
                    <ul>
                        <li>
                            <img src="picture/1.png" alt="">
                            <p class="dec">“浮妖百态”式神设计大赛火热投稿中</p>
                        </li>
                        <li>
                            <img src="picture/2.jpg" alt="">
                            <p class="dec">农夫山泉“舔瓶我崽”揭盖有奖</p>
                        </li>
                        <li>
                            <img src="picture/3.jpg" alt="">
                            <p class="dec">KFC跨界应援开启！</p>
                        </li>
                        <li>
                            <img src="picture/4.jpg" alt="">
                            <p class="dec">贴吧活动：地表最萌告白开启</p>
                        </li>
                        <li>
                            <img src="picture/5.jpg" alt="">
                            <p class="dec">大触觉醒第二季！同人插画大赛</p>
                        </li>
                        <li>
                            <img src="picture/6.jpg" alt="">
                            <p class="dec">天机谱：有奖攻略互动计划</p>
                        </li>
                    </ul>
                </div>
            </div>
            <!--activity end-->

            <!--contact start-->
            <div id="contact">
                <ul>
                    <li class="l1">
                        <a href="javascript:void(0)"><img src="picture/logo.png" alt=""></a>
                    </li>
                    <li class="l2 qrd">
                        <p class="p1">关注官方微博</p>
                        <p class="p2">扫描二维码</p>
                        <p class="p3">官方微博</p>
                        <p class="p4"><span></span>微博名：<a href="javascript:void(0)">网易阴阳师手游</a></p>
                        <div class="img"><img src="picture/wb.png" alt=""></div>
                    </li>
                    <li class="l3 qrd">
                        <p class="p1">关注微信公众号</p>
                        <p class="p2">扫描二维码</p>
                        <p class="p3">微信公众号</p>
                        <p class="p4">微博名：<a>yinyangshi163</a></p>
                        <div class="img"><img src="picture/wx.jpg" alt=""></div>
                    </li>
                    <li class="l4">
                        <i></i>
                        <p class="p1">客户服务电话</p>
                        <p class="p2">0571-26201179</p>
                        <p class="p4"><span></span><a href="javascript:void(0)">问题反馈</a> <a href="javascript:void(0)">精灵咨询</a> </p>
                    </li>
                </ul>
                <div class="goTop"></div>
            </div>
            <!--contact end-->

            <!--footer start-->
            <div id="footer">
                <p class="p1"></p>
                <div class="hover">
                    <p class="p2"></p>
                    <p class="p3"></p>
                    <p class="p4"></p>
                    <div class="qrd">
                        <div class="pic"><img src="picture/qrcode.png" alt=""></div>
                        <div class="txt"></div>
                    </div>
                </div>
            </div>
            <!--footer end-->

        </div>
        <!--<script src="js/newdata.js"></script>-->
        <!--<script src="js/shishendata.js"></script>-->
        <!--<script src="js/stratedata.js"></script>-->
        <!--<script src="js/fandata.js"></script>-->
        <!--<script src="js/index.js"></script>-->
    </body>
</html>













